<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#test{
			width: 300px;
			height: 400px;
			background: lime;
		}

		#test2{
			width: 200px;
			height: 500px;
			background: gray;
		}
	</style>
</head>
<body>
<!-- 	<script type="text/javascript">
		console.log(window.a,window.b);
		function t(){
			var a = 'scope';
			b = 'global';
		}
		t();
		console.log(window.a,window.b);
	</script> -->

	<div id="test" onclick="ch();">
		
	</div>
</body>
<script type="text/javascript">
	function ch(){
		var test = document.getElementById('test');
	    test.id = 'test2';
	}
</script>
</html>